<template>
  <div id="app">
    <el-card shadow="always" style="width: 95%;">
    <!--  1. 条件查询表单-->

        <el-form :inline="true" :model="studSearch"   class="demo-form-inline" size="medium">
            <el-form-item >
                <el-input v-model="studSearch.sname" placeholder="学生姓名"/>
            </el-form-item>
            <el-form-item >
                <el-input v-model="studSearch.addr" placeholder="学生住址"/>
            </el-form-item>
            <el-form-item >
                <el-select v-model="studSearch.cid" placeholder="所在班级">
                    <el-option label="所有班级" value="0"></el-option>
                    <el-option :label="c.cname" :value="c.cid" v-for="c in classes"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="search" plain  icon="el-icon-search">查询</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="success" @click="addStud" plain  icon="el-icon-plus">添加</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="warning" @click="handleDelete" plain  icon="el-icon-delete" plain>批量删除</el-button>
            </el-form-item>
        </el-form>

        <el-dialog :title="student.sid ? '修改学生': '添加学生'" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
            {{student}}
            <!--  this.$refs.ruleForm / this/.$refs['ruleForm']: 相当于在页面中找到如下表单。-->
            <el-form :model="student" :rules="rules" ref="ruleForm">
                <el-form-item label="学生姓名" :label-width="formLabelWidth" prop="sname">
                    <el-input v-model="student.sname" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="学生性别" :label-width="formLabelWidth" prop="sex">
                    <el-radio v-model="student.sex" label="男">男</el-radio>
                    <el-radio v-model="student.sex" label="女">女</el-radio>
                </el-form-item>
                <el-form-item label="学生年龄" :label-width="formLabelWidth" prop="age">
                    <el-input v-model.number="student.age" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="学生住址" :label-width="formLabelWidth" prop="addr">
                    <el-input v-model="student.addr" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="所在班级" :label-width="formLabelWidth" prop="cid">
                    <el-select v-model="student.cid" placeholder="选择所在班级">
                        <el-option :label="c.cname" :value="c.cid" v-for="c in classes" :key="c.cid"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </div>
        </el-dialog>

        <!-- 2. 学生数据的展示-->
      <el-table
              :data="students"
              @selection-change="handleSelectionChange"
              style="width: 100%">
      <el-table-column
              type="selection"
              width="55">
      </el-table-column>
        <el-table-column
                label="学生编号"
                prop="sid"
                align="center"
                width="180"/>
        <el-table-column
                label="学生姓名"
                prop="sname"
                align="center"/>
        <el-table-column
                label="性别"
                prop="sex"
                align="center"/>
        <el-table-column
                label="年龄"
                prop="age"
                align="center"/>
        <el-table-column
                label="家庭住址"
                prop="addr"
                align="center"/>
          <el-table-column
                  label="所在班级"
                  prop="cname"
                  align="center"/>

        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--  2. 分页导航-->
      <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page"
              :page-sizes="[5, 10, 15, 20]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
      </el-pagination>
    </el-card>
  </div>
</template>
<script>
  export default {
    data() {
      // 自定义年龄校验器
      const checkAge = (rule,value,callback) => {
          if(!value){
              callback(new Error("年龄必须填写！"))
          }else if(!Number.isInteger(value)){
              callback(new Error("年龄必须为整数！"))
          }else if(value < 1 || value > 200){
              callback(new Error("年龄必须为1到200岁之间！"))
          }else{
              callback()
          }
      }
      return {
          students: [],
          page: 1,       // 当前页
          pageSize: 5,   // 每页大小
          total: 100,    // 总记录数
          studSearch: {}, // 需要查询的学生，此对象封装的是查询条件
          classes: [],    // 所有班级
          dialogFormVisible: false,  // 默认隐藏对话框
          formLabelWidth: '100px',  // 对话框前的提示文本占的宽度
          student: {},
          multipleSelection: [],    // 代表点击复选框后存放数据的数组
          sids:[],                  // 需要删除的学生编号列表
          // 定义表单验证规则：
          rules:{
                // 1. 验证用户名
                sname: [
                    {required: true, message: '用户名必须填写!',trigger: 'blur'}
                ],
               // 2. 验证性别
               sex: [
                   { required:true, message: '必须选择性别！',trigger:'change' }
               ],
              // 3. 验证年龄
              age: [
                  // { required: true, message: '年龄必须填写!',trigger: 'blur'}
                  {validator: checkAge,trigger: 'blur'}
              ],
              // 4. 验证住址
              addr: [
                  { required: true, message: '住址必须填写!',trigger: 'blur'}
              ],
              // 5. 验证所在班级
              cid: [
                  { required: true, message: '必须选择所在班级!',trigger: 'change'}
              ]
          }
      }
    },
    created() {
      //1. 查询所有学生
      // this.findStudents()
      //2. 分页查询学生
      // this.findByPage()
      //3. 查询所有班级
      this.findClasses()
      //4. 条件查询带分页
      this.search()
    },
    methods: {
      //1. 查询所有学生
      findStudents(){
        this.axios.get("/student?cmd=list").then(({data}) => {
           this.students = data.data
        })
      },
      //2. 分页查询学生信息
      findByPage(){
        this.axios.get(`/student?cmd=findByPage&page=${this.page}&pageSize=${this.pageSize}`)
                .then(({data}) => {
                this.students = data.data.rows
                this.total = data.data.total
        })
      },
      //3. 查询所有班级
      findClasses(){
          this.axios.get("/classes").then(({data}) => {
             this.classes = data.data
          })
      },
      //4. 条件查询带分页
      search(){
          this.axios.post(`/student?cmd=search&page=${this.page}&pageSize=${this.pageSize}`,this.studSearch).then(({data}) => {
              // console.log("data:",data)
              this.students = data.data.rows
              this.total = data.data.total
          })
      },
      //5. 打开添加学生对话框
       addStud(){
            //5.1 清空原来的数据
            this.student = {}
            //5.2 打开对话框
            this.dialogFormVisible = true
       },
      //6. 点击‘编辑’按钮
      handleEdit(index, row) {
        console.log(index, row);
        //6.1 将当前点击的哪条数据显示在对话框中
        this.student = row
        //6.2 打开对话框
        this.dialogFormVisible = true
      },
      //7. 保存用户
      save(){
        this.$refs.ruleForm.validate((valid,fields) => {
            //7.1 定义代表提交地址的变量
            // let url = "/student?cmd=add"
            // if(this.student.sid){
            //     url = "/student?cmd=update"
            // }
            if(valid){      // 代表所有的表单控件验证通过
                this.axios.post(`/student?cmd=${this.student.sid ? 'update' : 'add'}`,this.student).then(({data}) => {
                    const _this = this
                   if(data.code === 200){
                       this.$message({
                           message: data.msg,
                           type: 'success',
                           onClose(){       // 当此消息框关闭时，执行如下操作
                               //① 关闭对话框
                               _this.dialogFormVisible = false
                               //② 刷新表格
                               _this.search()
                           }
                       });
                   }
                })
            }else{
                console.log("未通过的字段：",fields)
            }
        })
      },
      // 点击复选框之后触发事件函数
      handleSelectionChange(val) {
          this.multipleSelection = val;
          console.log(this.multipleSelection)
      },
      // 删除学生
      handleDelete(index, row) {
          console.log("row:",row)
        // 因为要删除的学生编号都存放在sids这个数组中，所以，我们不管是删除单个还是多个学生，可以将他们的编号都放在这个数组中，再将这个数组提交到后台去即可。
        if(row){        // 代表点击的单个‘删除’按钮
            this.sids = [row.sid]
        }else{          // 代表点击的是‘批量删除’按钮
            this.sids = this.multipleSelection.map(m => m.sid)
        }
        console.log("sids:",this.sids);
          this.$confirm(`是否真的要删除学号为:${this.sids}?`, '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
          }).then(() => {           // 这里代表点击了"确定"按钮后执行的代码
              // 点了确定按钮后，向后台发送请求，如果执行删除成功，就显示下面的消息框
              this.axios.get(`/student?cmd=delete&sids=${this.sids}`).then(({data}) => {
                 if(data.code === 200){
                     const _this = this
                     this.$message({
                         type: 'success',
                         message: data.msg,
                         onClose(){
                             _this.search()
                         }
                     });
                 }
              })

          }).catch(() => {         // 代表代点了取消按钮后的代码
              this.$message({
                  type: 'info',
                  message: '已取消删除'
              });
          });
      },
      //pageSize大小改变时触发
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageSize = val
        // this.findByPage()
          this.search()
      },
      //page大小改变时触发
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.page = val
        // this.findByPage()
          this.search()
      }
    }
  }
</script>
<style>
  .el-card{
    margin: 0 auto;
  }
  .el-pagination{
    text-align: right;
    margin-top: 20px;
  }
</style>
